import React, {
  Component
} from 'react';
import {
  NavLink,
  HashRouter as Router,
  Route
} from 'react-router-dom';
import { Menu, Dropdown } from 'antd';
import Index from '../components/Index/index.jsx';
import Resource from '../components/Resource/index.jsx'
import Customer from '../components/customer/index.jsx'
import About from '../components/about/index.jsx'
import Join from '../components/join/index.jsx'
import Weidai from '../components/examples/weidai.jsx'
import Bigweb from '../components/examples/360web.jsx'
import Lou from '../components/examples/19lou.jsx'
import Jiali from '../components/examples/jiali.jsx'
import Gzh from '../components/examples/gzh.jsx'
import Pyq from '../components/examples/pyq.jsx'
import Hdbanner from '../components/resources/hdbanner.jsx'
import Spbanner from '../components/resources/spbanner.jsx'
import Sjbanner from '../components/resources/sjbanner.jsx'
import Xxbanner from '../components/resources/xxbanner.jsx'
import Ssbanner from '../components/resources/ssbanner.jsx'
import Yybanner from '../components/resources/yybanner.jsx'
import Fengcai from '../components/other/index.jsx'
import Zizhi from '../components/other/zizhi.jsx'
import '../styles/App.scss';

// const BaseUrl = '/webBoss'
const routeBase = [
  '首页',
  '流量资源',
  '客户案例',
  '关于我们',
  '加入我们'
]
const routes = [ // 构建全局路由
  // {
  //   path: '/',
  //   component: Index
  // },
  {
    path: '/index',
    component: Index
  },
  {
    path: '/resource',
    component: Resource
  },
  {
    path: '/customer',
    component: Customer
  },
  {
    path: '/about',
    component: About
  },
  {
    path: '/join',
    component: Join
  },
  {
    path: '/weidai',
    component: Weidai
  },
  {
    path: '/360web',
    component: Bigweb
  },
  {
    path: '/19lou',
    component: Lou
  },
  {
    path: '/jiali',
    component: Jiali
  },
  {
    path: '/gzh',
    component: Gzh
  },
  {
    path: '/pyq',
    component: Pyq
  },
  {
    path: '/hdbanner',
    component: Hdbanner
  },
  {
    path: '/spbanner',
    component: Spbanner
  },
  {
    path: '/sjbanner',
    component: Sjbanner
  },
  {
    path: '/ssbanner',
    component: Ssbanner
  },
  {
    path: '/yybanner',
    component: Yybanner
  },
  {
    path: '/xxbanner',
    component: Xxbanner
  },
  {
    path: '/fengcai',
    component: Fengcai
  },
  {
    path: '/zizhi',
    component: Zizhi
  }
]

const menu = (
  <Menu>
    <Menu.Item key="0">
      <a rel="noopener noreferrer" href='#/ssbanner'>搜索引擎</a>
    </Menu.Item>
    <Menu.Item key="1">
      <a rel="noopener noreferrer" href='#/sjbanner'>社交广告</a>
    </Menu.Item>
    <Menu.Item key="2">
      <a rel="noopener noreferrer" href='#/spbanner'>视频广告</a>
    </Menu.Item>
    <Menu.Item key="3">
      <a rel="noopener noreferrer" href='#/yybanner'>应用推广</a>
    </Menu.Item>
    <Menu.Item key="4">
      <a rel="noopener noreferrer" href='#/hdbanner'>互动广告</a>
    </Menu.Item>
    <Menu.Item key="5">
      <a rel="noopener noreferrer" href='#/xxbanner'>信息流广告</a>
    </Menu.Item>
  </Menu>
)

const menuAbout = (
  <Menu>
    <Menu.Item key="0">
      <a rel="noopener noreferrer" href='#/zizhi'>媒体资质</a>
    </Menu.Item>
    <Menu.Item key="1">
      <a rel="noopener noreferrer" href='#/fengcai'>亦盛风采</a>
    </Menu.Item>
  </Menu>
)

const RouteWithSubRoutes = (route) => (
<Route path={route.path} exact render={props => (
    // pass the sub-routes down to keep nesting
      <route.component {...props} routes={route.routes} />
)
}
/>
)

// const getConfirmation = (message, callback) => {
//   const allowTransition = window.confirm(message)
//   // callback(allowTransition)
// }
export default class BasicExample extends Component {
  constructor(props) {
    super(props)
    this.state = {
      author: '小小雪'
    }
  }
  render() {
    return (
      <Router>
        <div className='main-content'>
          <div className='app-header home-contain'>
            <a href='#/index' className='logo'>
                <img src={`${process.env.PUBLIC_URL}/images/logo.png`} alt='亦盛传媒' />
            </a>
            <div className='nav-group'>
              {
                routeBase.map((item, i) => {
                  if (item === '流量资源') {
                    return(
                      <Dropdown placement='topCenter' overlay={menu} key={i}>
                        <NavLink className='ant-dropdown-link' to={routes[i].path}>{item}</NavLink>
                      </Dropdown>
                    )
                  } else {
                    if (item === '关于我们') {
                      return (
                        <Dropdown placement='topCenter' overlay={menuAbout} key={i}>
                          <NavLink className='ant-dropdown-link' to={routes[i].path}>{item}</NavLink>
                        </Dropdown>
                      )
                    } else {
                      return(
                        <NavLink key={i} to={routes[i].path}>{item}</NavLink>
                      )
                    }
                  }
                })
              }
            </div>
            <div className='nav-phone'>
              <i className='glyphicon-phone glyphicon'></i>400-166-7171
            </div>
          </div>
          <div className='clearfix'>
            {
              routes.map((route, i) => (
                <RouteWithSubRoutes key={i} {...route}/>
              ))
            }
          </div>
        </div>
      </Router>
    )
  }
}
